<template>
  <div class="font-switcher" ref="dropdownRef">
    <button 
      class="font-toggle-btn"
      @click="toggleDropdown"
      title="切换字体"
    >
      A
    </button>
    
    <div v-if="isOpen" class="font-dropdown">
      <div class="font-dropdown-header">选择字体</div>
      <div class="font-list">
        <div
          v-for="font in fonts"
          :key="font.id"
          class="font-option"
          :class="{ active: currentFont === font.id }"
          @click="handleFontChange(font.id)"
        >
          <span class="font-name" :style="{ fontFamily: font.family }">{{ font.name }}</span>
          <span v-if="currentFont === font.id" class="font-check">✓</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { dropdownManager } from '../utils/dropdownManager'

const DROPDOWN_ID = 'font-switcher'
const currentFont = ref('system')
const isOpen = ref(false)
const dropdownRef = ref<HTMLElement | null>(null)
let autoCloseTimer: number | null = null
let unsubscribe: (() => void) | null = null

const fonts = [
  { id: 'system', name: '系统默认', family: 'system-ui' },
  { id: 'songti', name: '宋体', family: 'SimSun, serif' },
  { id: 'yahei', name: '微软雅黑', family: 'Microsoft YaHei, sans-serif' },
]

const applyFont = (fontId: string) => {
  document.documentElement.setAttribute('data-font', fontId)
}

const handleFontChange = (fontId: string) => {
  currentFont.value = fontId
  applyFont(fontId)
  localStorage.setItem('font', fontId)
  isOpen.value = false
}

const toggleDropdown = () => {
  isOpen.value = !isOpen.value
  if (isOpen.value) {
    dropdownManager.notifyOpen(DROPDOWN_ID)
  }
}

const handleMouseEnter = () => {
  if (autoCloseTimer) {
    clearTimeout(autoCloseTimer)
    autoCloseTimer = null
  }
}

const handleMouseLeave = () => {
  autoCloseTimer = window.setTimeout(() => {
    isOpen.value = false
  }, 2000)
}

watch(isOpen, (newValue) => {
  const dropdownElement = dropdownRef.value
  if (dropdownElement && newValue) {
    dropdownElement.addEventListener('mouseenter', handleMouseEnter)
    dropdownElement.addEventListener('mouseleave', handleMouseLeave)
    autoCloseTimer = window.setTimeout(() => {
      isOpen.value = false
    }, 2000)
  } else if (dropdownElement) {
    dropdownElement.removeEventListener('mouseenter', handleMouseEnter)
    dropdownElement.removeEventListener('mouseleave', handleMouseLeave)
    if (autoCloseTimer) {
      clearTimeout(autoCloseTimer)
    }
  }
})

onMounted(() => {
  const savedFont = localStorage.getItem('font') || 'system'
  currentFont.value = savedFont
  applyFont(savedFont)
  
  unsubscribe = dropdownManager.subscribe((openedId) => {
    if (openedId !== DROPDOWN_ID) {
      isOpen.value = false
    }
  })
})

onUnmounted(() => {
  if (unsubscribe) {
    unsubscribe()
  }
  if (autoCloseTimer) {
    clearTimeout(autoCloseTimer)
  }
})
</script>

<style scoped>
@import './FontSwitcher.css';
</style>
